<h2>Step 1. Find a place to place the themes</h2>
<p>Organization is an important aspect of managing a knowledge base. When
  developing a new theme or importing an existing one it's a good idea to
  keep them into one place.</p>
<p>As such, the first step is to create a new note to gather all the themes.</p>
<p>
  <img src="Creating a custom theme_5_.png">
</p>
<h2>Step 2. Create the theme</h2>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="Creating a custom theme_3_.png">
      </td>
      <td>Themes are code notes with a special attribute. Start by creating a new
        code note.</td>
    </tr>
    <tr>
      <td>
        <img src="Creating a custom theme_1_.png">
      </td>
      <td>Then change the note type to a CSS code.</td>
    </tr>
    <tr>
      <td>
        <img src="Creating a custom theme_Cr.png">
      </td>
      <td>In the <em>Owned Attributes</em> section define the <code>#appTheme</code> attribute
        to point to any desired name. This is the name that will show up in the
        appearance section in settings.</td>
    </tr>
  </tbody>
</table>

<h2>Step 3. Define the theme's CSS</h2>
<p>As a very simple example we will change the background color of the launcher
  pane to a shade of blue.</p>
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
	--launcher-pane-background-color: #0d6efd;
}</code></pre>
<h2>Step 4. Activating the theme</h2>
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
  settings. You should see the newly created theme:</p>
<p>
  <img src="Creating a custom theme_2_.png">
</p>
<p>Afterwards the application will refresh itself with the new theme:</p>
<p>
  <img src="Creating a custom theme_4_.png">
</p>
<p>Do note that the theme will be based off of the legacy theme. To override
  that and base the theme on the new TriliumNext theme, see:&nbsp;<a href="#root/_help_WFGzWeUK6arS">Theme base (legacy vs. next)</a>
</p>
<h2>Step 5. Making changes</h2>
<p>Simply go back to the note and change according to needs. To apply the
  changes to the current window, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R </kbd> to
  refresh.</p>
<p>It's a good idea to keep two windows, one for editing and the other one
  for previewing the changes.</p>